<template>
	<view class="bj1">
		<view class="container" v-for="(item,index) in listone">
			<view class='picture'>
				<image class="itemimg" src="@/static/createRate/yhqicon.png"></image>
			</view>

			<view class="item1">

				<text style="display: inline;">{{item.title}}</text>
				<text class="item12" style="display: inline;">({{item.result}})</text>
			</view>


			<view class="item2">{{item.money}}</view>

			<view class="item3">{{item.detail}}</view>

		</view>
		<view class="titled">还款记录</view>

		<view v-for="(item, index) in list" :key="index">

			<view class="immediate-wrap-card dis">
				<view class="immediate-wrap-card-top dis">
					<view class="immediate-wrap-card-top-msg disCenter">

						<text class="immediate-wrap-card-top-tit">{{ item.time }}</text>
					</view>
					<view @click="loginclick">
						<text class="immediate-wrap-card-top-tag">详情</text>

						<image class="immediate-wrap-card-top-img" src="@/static/createRate/xqicon.png"></image>
					</view>
				</view>

				<view class="immediate-wrap-card-center dis">
					<view class="immediate-wrap-card-center-left">
						<view class="immediate-wrap-card-center-left-top">可借额度（元）</view>
						<view class="immediate-wrap-card-center-left-bot">{{ item.quotaUpper }}</view>
					</view>

					<view class="immediate-wrap-card-center-right">
						<view class="immediate-wrap-card-center-right-top">200000</view>

					</view>


				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		methods: {
			loginclick() {
				uni.navigateTo({
					url: '/pagesB/createRating/repayPlan'
				});
			},
			handleFilter() {
				console.log("执行筛选操作");
				// 执行搜索条件
			},
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) this.handleFilter();
		},

		data() {
			return {
				listone: [{
					title: '总金额',
					money: '200000',
					detail: '2024.07.05借款200,000元',
					result: '已还清'
				}],
				list: [{
						icon: '../../static/duihao.png',
						name: '闪电借款',
						label: '额度高,放款快,无抵押',
						quotaUpper: '还款银行：招商银行(*0577)',
						quotaLower: '1000',
						usefulLife: '3-12',
						personCount: 5234,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '小额贷',
						label: '利率低,门槛低,极速到账',
						quotaUpper: '还款银行：招商银行(*0577)',
						quotaLower: '500',
						usefulLife: '6-24',
						personCount: 3129,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '还款银行：招商银行(*0577)',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '还款银行：招商银行(*0577)',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '还款银行：招商银行(*0577)',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '还款银行：招商银行(*0577)',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					}
				]
			}
		},

	}
</script>

<style lang="scss" scoped>
	.bj1 {
		background-color: #F3F4F5;
		background-size: 100% 100%;
		padding: 28rpx 28rpx;
	}


	.container {
		height: 332rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;


	}

	.item1 {
		height: 40px;
		padding-top: 48rpx;
	}

	.item2 {
		height: 55px;
		padding-top: 60rpx;
		font-family: DIN, DIN;
		font-weight: bold;
		font-size: 72rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.item3 {
		height: 60px;
		padding-top: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.item12 {

		padding-left: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.itemimg {
		width: 160rpx;
		height: 142rpx;
		position: absolute;


	}

	.picture {
		margin-bottom: 220rpx;
		margin-right: -280rpx;
		position: absolute;


	}

	.titled {
		padding-left: 5rpx;
		padding-bottom: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #1B1B1E;

	}

	.immediate-wrap-card {

		.immediate-wrap-card-center {

			.immediate-wrap-card-center-right {
				text-align: center;
				// background-color: #fff;

				.immediate-wrap-card-center-right-top {

					margin-top: -38rpx;
					height: 38rpx;
					font-family: DIN, DIN;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}



				.immediate-wrap-card-center-right-btm1 {
					display: flex;
					font-size: 24rpx;
					align-items: center;

					.immediate-wrap-card-center-right-btm1-tit {
						color: #FF0000;
					}

					image {
						width: 20rpx;
						height: 24rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}

				}


			}

			.immediate-wrap-card-center-left {
				.immediate-wrap-card-center-left-top {
					height: 44rpx;
					font-family: PingFang SC, PingFang SC;

					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}



				.immediate-wrap-card-center-left-bot {
					padding-top: 50rpx;
					width: 456rpx;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

				}
			}

			// margin: 12rpx 0 8rpx 0;
			border-top: 2rpx solid rgba(0, 0, 0, 0.09);
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;
		}




		.immediate-wrap-card-top {
			align-items: center;
			justify-content: space-between;




			.immediate-wrap-card-top-tit {
				color: #333;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 550;
			}


			.immediate-wrap-card-top-tag {

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 20rpx;
			}

			.immediate-wrap-card-top-img {

				margin-left: 10rpx;
				width: 14rpx;
				height: 22rpx;

			}

			image {
				width: 62rpx;
				height: 62rpx;
				margin-right: 12rpx;
				border-radius: 16rpx;
			}
		}

		position: relative;
		flex-direction: column;
		border-radius: 20rpx;
		margin:0 0 24rpx 0;
		padding: 32rpx;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 24rpx;
		height: 230rpx;

	}

	.disCenter {
		display: flex;
		align-items: center;
	}
</style>